<template>
  <div class="container" >
   <el-card v-loading="loading" class="card" style="margin-top: 10px">
      <!-- 按钮 -->
      <div class="top">
        <span style="color: #ffc0cb; font-size: 10px"
          >说明:目前支持学科和关键字筛选</span
        >
        <el-button
          class="filter-item fr"
          size="small"
          type="success"
          icon="el-icon-edit"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 下拉框 -->
     <!-- 下拉框 -->
      <div class="form" style="margin-top: 20px">
        <el-form label-width="70px" :model="form">
          <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="学科">
              <template #default="{row}">
                <el-select v-model="form.subjectID" @change="handelChangeSub(row)">
                  <el-option
                    v-for="item in subjectList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" >
                  <el-option v-for="item in second " :key="item.vue" :value="item.value" :label="item.label"/>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags">
                  <el-option v-for="item in tagList " :key="item.vue" :value="item.value" :label="item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input
                  placeholder="根据题干搜索"
                  v-model="form.keyword"
                /> </el-form-item
            ></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType">
                   <el-option v-for="item in questionType " :key="item.value" :value="item.value" :label="item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty">
                 <el-option v-for="item in difficulty " :key="item.vue" :value="item.value" :label="item.label"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction">
                   <el-option v-for="(item,index) in direction " :key="index" :value="index" :label="item"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" >
                   <el-option v-for="item in userList " :key="item.id" :value="item.id" :label="item.username"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称">
                <el-input v-model="form.shortName" />
                </el-form-item>
                </el-col>
            <el-col :span="6">
              <el-row :gutter="4">
                <el-form-item label="城市">
                  <el-col :span="12">
                    <el-select v-model="form.province" @change="handelProvinceChange" >
                      <el-option v-for="(item,index) in provinces " :key="index" :value="item" :label="item"/>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="form.city">
                     <el-option v-for="(item,index) in citys " :key="index" :value="item" :label="item"/>
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-form-item style="margin-left: 33px">
                <el-button size="small" @click="handelClean">清除</el-button>
                <el-button size="small" type="primary" @click="handelSearch">搜索</el-button>
              </el-form-item></el-col
            >
          </el-row>
        </el-form>
      </div>
      <!-- 数据记录 -->
      <!-- <el-alert
        type="info"
        class="alert"
        :closable="false"
        show-icon
      >数据一共{{total}}条</el-alert> -->
      <el-alert
        :title="`数据一共`+total+`条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 表格数据 -->
          <el-table :data="questionsList"  style="width: 100%" fixed="right">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="80">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="80"> </el-table-column>
        <el-table-column prop="questionType" label="题型" :formatter="formatterQus" width="80"> </el-table-column>
        <el-table-column prop="question" label="题干">
          <template #default="{row}">
                <div v-html="row.question"></div >
          </template>
           </el-table-column>
        <el-table-column prop="addDate" label="录入时间" :formatter="formatterDate" min-width="100"> </el-table-column>
        <el-table-column prop="difficulty" label="难度" :formatter="formatterDif"> </el-table-column>
        <el-table-column prop="creator" label="录入人"> </el-table-column>
        <el-table-column prop="address" label="操作" width="190">
          <template #default="{row}" >
          <div class="cell" style="padding-left:-20px">
            <el-button  @click="handelView(row.id)" type="primary" circle   plain size="small"><i class="el-icon-view"></i>  </el-button>
          <el-button  @click="$router.push(`/questions/new/?id=${row.id}`)"    type="success"  circle plain size="small"><i class="el-icon-edit"></i>  </el-button>
          <el-button  @click="handelDel(row.id)" circle  plain size="small"><i class="el-icon-delete"></i>  </el-button>
          <el-button @click="handelAdd(row.id)" type="warning" circle  plain size="small"><i class="el-icon-check"></i>  </el-button>
          </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pages" style="text-algin:right;padding-left:1000px; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :total="total"
          :page-size="pagesize"
          :page-sizes="[5,10, 20, 30, 50]"
          :hide-on-single-page="this.questionsList.length <= 1"
          background
          layout="->,prev, pager, next,sizes, jumper"
        ></el-pagination>
      </div>
       <div class="container">
     <el-dialog
  title="题目预览"
  :visible="showDialog"
  width="50%"
  :before-close="handleClose"
 >
  <!-- 表格 -->
  <el-row>
  <el-col :span="6" ><div>【题型】：{{ viewList.questionType  }} </div></el-col>
  <el-col :span="6"><div >【编号】：{{viewList.id}} </div></el-col>
  <el-col :span="6"><div>【难度】：{{viewList.difficulty}}</div></el-col>
  <el-col :span="6"><div >【标签】：{{viewList.tags}}</div></el-col>
</el-row>
<br>
<el-row>
  <el-col :span="6"><div >【学科】：{{viewList.subjectName}}</div></el-col>
  <el-col :span="6"><div >【目录】：{{viewList.directoryName}}</div></el-col>
  <el-col :span="6"><div>【方向】：{{viewList.direction}}</div></el-col>
</el-row>
<hr>
【题干】：
<div v-html="viewList.question"></div>
<div v-if="viewList.questionType !== '简答'">
  <div>{{viewList.questionType}}题选项:(以下选中的选项为正确答案)</div>
  <!-- 单选 -->
  <div v-if="viewList.questionType === '单选'">
     <el-radio-group v-model="radio">
    <div  v-for="item in viewList.options" :key="item.id" style="margin-top:10px;">
      <el-radio :label="item.isRight">{{item.code}}</el-radio>
    </div>
   </el-radio-group>
  </div>
<!-- 多选 -->
  <div v-if="viewList.questionType === '多选'" >
     <el-checkbox-group v-model="checkList">
    <div v-for="item in viewList.options" :key="item.id" style="margin-top:10px;">
      <el-checkbox :label="item.isRight"> {{item.code}}</el-checkbox>
    </div>
  </el-checkbox-group>
  </div>
</div>
<hr>
【参考答案】：<el-button type="danger" @click="clickBtn">视频答案预览</el-button>
<div ref="video" class="video">
  <video :src="viewList.videoURL" controls="controls" v-show="video"></video>
</div>
<hr>
 <div>【答案解析】:{{viewList.answerID}}</div>
<hr>
 <div>【题目备注】:{{viewList.remarks}}</div>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="handleClose">关闭</el-button>
  </span>
    </el-dialog>
   </div>
    </el-card>
  </div>
</template>

<script>
import { simple as simpleSub } from '@/api/hmmm/subjects.js'
import { simple as simpleDir } from '@/api/hmmm/directorys.js'
import { simple as simpleTag } from '@/api/hmmm/tags.js'
import { simple as simpleUser } from '@/api/base/users.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { list as questionsList, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      total: 0, // 页码总数
      page: 1, // 当前页
      pagesize: 10, // 每页条数
      tableData: [], // 表格列表
      subjectList: [], // 学科列表
      tagList: '', // 标签列表
      second: '', // 二级目录
      questionType, // 试题类型
      difficulty, // 难度
      direction, // 方向
      userList: '', // 用户简单列表
      provinces, // 城市
      citys, // 区
      questionsList: [], // 基础题库列表
      loading: false, // 加载圈
      form: {
        subject: '',
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        id: ''
      },
      showDialog: false, // 预览弹框显示
      viewList: {}, // 弹层数据
      video: false,
      radio: '',
      checkList: []
    }
  },
  created () {
    // 1.获取简单学科列表
    this.handelSub()
    // 2.获取简单标签列表
    this.handelTag()
    // 3.获取用户简单列表
    this.handelUser()
    // 4.获取城市简单列表
    this.handelProvince()
    // 5.基础题库列表
    this.getQuestionsLists()
    // 6.按键回车
    window.onkeydown = function (e) {
      if (e.keyword === 13) {
        this.handleCurrentChang()
      }
    }
  },
  methods: {
  // 1.监听页数的变化
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getQuestionsLists()
    },
    // 2.监听当前页的变化
    handleCurrentChange (val) {
      const oldPage = this.page
      if (oldPage) {
        // 当前页码为空时
        if (oldPage !== val && val <= this.total) {
          // 当页面发生变化时或者大于等于总页数 更新当前页码
          this.page = val
          this.getQuestionsLists()
        }
      }
    },
    // 3.监听学科变化 获取二级目录
    async handelChangeSub (item) {
      const { data } = await simpleDir({ subjectID: item })
      this.second = data
      this.total = data.counts
    },
    // 4.监听城市变化 获取区列表
    handelProvinceChange (pname) {
      console.log(pname, 333)
      this.citys = citys(pname)
      console.log(this.citys, 666)
    },
    // 5.获取简单学科列表
    async handelSub () {
      const { data: dataSub } = await simpleSub()
      this.subjectList = dataSub
    },
    // 6.获取简单标签列表
    async handelTag () {
      const { data: dataTag } = await simpleTag()
      this.tagList = dataTag
    },
    // 7. 用户简单列表
    async handelUser () {
      const { data: items } = await simpleUser(this.form.keyword)
      this.userList = items
    },
    // 8.城市简单列表
    handelProvince () {
      this.provinces = provinces()
    },
    // 9.清除
    handelClean () {
      this.form = {}
    },
    // 10.搜索
    async   handelSearch () {
      const obj = {}
      for (const key in this.form) {
        if (this.form[key]) {
          obj[key] = this.form[key]
          console.log(key)
        }
      }
      console.log(obj, 111)
      const { data } = await questionsList({ ...obj })
      console.log(data.items, 999)
      this.questionsList = data.items
    },
    // 11.获取基础题库列表
    async getQuestionsLists () {
      this.loading = true
      const { data } = await questionsList({ page: this.page, pagesize: this.pagesize })
      this.questionsList = data.items
      this.total = data.counts
      this.loading = false
    },
    // 12.处理表格中目录格式
    formatterQus (cellValue) {
      const obj = questionType.find(item => item.value === +cellValue.questionType)
      return obj.label
    },
    // 13.处理表格中难度格式
    formatterDif (cellValue) {
      const obj = difficulty.find(item => item.value === +cellValue.difficulty)
      return obj.label
    },
    // 14.处理表格中时间格式
    formatterDate (cellValue) {
      return dayjs(cellValue.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 15.加入精选
    handelAdd (id) {
      this.$confirm('此操作将改题目加入精选,是否继续?', '提示', { type: 'info' }).then(async () => {
        await choiceAdd({ id, choiceState: 1 })
        this.$message.success('加入精选题库成功!')
        this.getQuestionsLists()
      })
    },
    // 16删除
    handelDel (id) {
      this.$confirm('此操作将永久删除改题目,是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        this.getQuestionsLists()
        this.$message.success('删除成功!')
        // 当列表数据小于1 跳转到前一页
        if (this.questionsList.length < 1) {
          this.page--
          this.getQuestionsLists()
        }
      })
    },
    // 17 预览弹框
    async handelView (id) {
      this.showDialog = true
      const { data } = await detail({ id })
      console.log(data, 777)
      const obj = data.options.find(item => item.isRight === 1)
      this.radio = obj.isRight
      this.checkList = obj.isRight
      for (const key in data) {
        // 难度
        if (key === 'difficulty') {
          difficulty.forEach(item => {
            // 遍历difficulty item.value 和 data[key]相等
            if (item.value === +data[key]) {
              data[key] = item.label
            }
          })
        }
        // 题型
        if (key === 'questionType') {
          questionType.forEach(item => {
            // 遍历difficulty item.value 和 data[key]相等
            if (item.value === +data[key]) {
              data[key] = item.label
            }
          })
        }
      }
      this.viewList = data
    },
    // 18.关闭预览弹框
    handleClose () {
      this.showDialog = false
      this.video = false
    },
    // 19.点击视频播放按钮显示播放器
    clickBtn () {
      this.$refs.video.style.display = 'block'
      this.video = !this.video
    }
  }
}
</script>

<style scoped lang='scss'>
.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.el-table{
 .cell{
width: 250px;
 }
}
.el-dialog{
  .video{
    display: none;
  }
}
</style>
